import { Descriptions, Button } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import cztxlTemplate from "../../../../../manager/newPages/NewCzt/cztxl";
import jzzyxlTemplate from "../../../../../manager/newPages/NewJzzy/jzzyxl";
import Api from "../../../../../../../utils/api";
export default function DataDetail(props) {
    let { item, cztxl, jzzyxl, yhlx } = props;
    const data = { ...item, ...JSON.parse(item?.xq) }

    const [template, setTemplate] = useState()
    useEffect(() => {
        Api.getConfig().then(resp => {
            if (cztxl) {
                setTemplate(cztxlTemplate[cztxl]?.templates || jzzyxlTemplate[cztxl]?.templates || resp?.detailTemplate?.[`${cztxl}`])
            } else if (jzzyxl) {
                setTemplate(cztxlTemplate[jzzyxl]?.templates || jzzyxlTemplate[jzzyxl]?.templates || resp?.detailTemplate?.[`${jzzyxl}`])
            } else if (yhlx) {
                setTemplate(cztxlTemplate[yhlx]?.templates || jzzyxlTemplate[yhlx]?.templates || resp?.detailTemplate?.[`${yhlx}`])
            }
        })
    }, [cztxl, jzzyxl, yhlx])
    return <>
        {data && <Descriptions column={1} bordered size="middle" style={{
            // overflow: 'auto'
        }}>
            {
                template?.map((t, value) => {
                    if (cztxl) {

                        return (
                            <Descriptions.Item label={t.alias || t.title}>{data?.[`${t.dataIndex || t.name}`]}</Descriptions.Item>
                        )
                    } else {
                        return (
                            <Descriptions.Item label={t.alias || t.title}>{data?.[`${t.dataIndex || t.name}`]}</Descriptions.Item>
                        )

                    }

                })
            }

        </Descriptions>}
    </>
}